<template>
  <div class="orderLogisticList">
    <div class="title">
      <navTitle :navArr="navArr" :activeIndex="navIndex" @check="checkNav">
        <b class="button-n" slot="right" @click="searchApplay">申请查件</b>
      </navTitle>
    </div>
    <noCont v-if="isEmpty"></noCont>
    <div class="step1" v-if="navIndex == 0">
      <div class="cont" v-if="!isEmpty">
        <div class="tables" v-for="(item, index) in tableData" :key="index">
          <div class="title">
            <span>{{ item.shopTypeDetail || '' }}订单号：{{ item.thirdOrderNo || '--' }}</span>
            <span>{{ item.logisticsTypeDetail + '-' + item.logisticsId || '--' }}</span>
            <span>{{ item.gmtCreate }}</span>
            <span class="status">{{ item.checkStatusDetail }}</span>
          </div>
          <ul class="goodsInfo">
            <li class="detail">
              <div class="item" v-for="(m, i) in item.productDetail ? JSON.parse(item.productDetail) : []" :key="i">
                <img class="goodsImg" @click="lookImg(m.picList ? JSON.parse(m.picList)[0] : noImg)" :src="m.picList ? JSON.parse(m.picList)[0] : noImg" alt="商品标题">
                <div class="info">
                  <h6>{{ m.productName }}</h6>
                  <p>
                    <span>单价：{{ m.price }}元</span>
                    <span>重量：{{ m.weight }}kg</span>
                    <span>数量：{{ m.num }}</span>
                  </p>
                </div>
              </div>
            </li>
            <li class="address">
              <span>查件原因：{{ item.checkReason }}</span>
              <br />
              <span>备注：{{ item.checkComment }}</span>
              <br>
              <span>查件截图：</span>
              <br>
              <div>
                <img :src="m" alt="" @click="lookImg(m)" v-for="(m, i) in item.logisticPic ? JSON.parse(item.logisticPic) : []" :key="i">
              </div>
            </li>
            <li class="price" v-if="item.checkStatus != 0">
              <span>查件结果：</span>
              <p>{{ item.checkResult }}</p>
              <span>建议解决方案：</span>
              <p v-if="item.checkResultType == 22">请耐心等待</p>
              <p v-else-if="item.checkResultType == 21">申请重新发包或者申请退款</p>
              <p v-else>您好，这边帮您和快递核实包裹信息，快递查询完毕后这边会给您安排处理，请您耐心等待。您也可以直接联系圆通快递客服95554</p>
            </li>
            <li class="price" v-if="item.checkStatus == 0">
            </li>
            <li class="operate">
              <b class="text-button-b" v-if="(item.dealStatus != 12 && item.dealStatus != 11 && item.dealStatus != 13) && item.checkResultType == 21" @click="applayBackMoney(item)">申请退款</b>
              <b class="text-button-b" v-if="(item.dealStatus != 12 && item.dealStatus != 11 && item.dealStatus != 13) && item.checkResultType == 21" @click="applySend(item)">申请重发</b>
              <b v-if="item.dealStatus != 0 && item.checkStatus == 2">{{ item.dealStatusDetail || '' }}</b>
            </li>
          </ul>
        </div>
        <!-- <div class="pager">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizeArray" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
          </el-pagination>
        </div> -->
        <el-dialog custom-class="alertGroup" title="商品详情" :modal-append-to-body="false" :visible.sync="goodsInfoObj.show" width="440px" top="10vh">
          <div class="content" style="text-align:center;">
            <ul class="list">
              <li v-for="(item, index) in goodsInfoObj.item.productDetail ? JSON.parse(goodsInfoObj.item.productDetail) : []" :key="index">
                <img :src="item.picList ? JSON.parse(item.picList)[0] : noImg" alt="商品主图">
                <span>{{ item.productName }}</span>
                <p>
                  <span>{{ item.weight }}kg</span>
                  <br />
                  <span>*{{ item.num }}件</span>
                </p>
              </li>
            </ul>
            <p class="total">
              <span>总重量：
                <i>{{ goodsInfoObj.item.weight }}kg</i>
              </span>
              <span>总金额：
                <i>{{ goodsInfoObj.item.price }}元</i>
              </span>
            </p>
            <div class="backCont">
              <el-form ref="backCont" :model="backObj" label-width="80px">
                <el-form-item label="退款原因">
                  <el-select v-model="backObj.reason" class="input-n" placeholder="请选择">
                    <el-option style="padding: 0 10px;" label="遗失退款" value="遗失退款"></el-option>
                    <!-- <el-option style="padding: 0 10px;" label="其他" value="其他"></el-option> -->
                  </el-select>
                </el-form-item>
                <!-- <el-form-item label="截图">
                <imgUpload :imgList="backObj.imgList"></imgUpload>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="backObj.comment" class="input-n" type="textarea" :rows="2" placeholder="请输入内容">
                </el-input>
              </el-form-item> -->
              </el-form>
            </div>
          </div>
          <div class="buttons">
            <b class="button-w" @click="goodsInfoObj.show = false">取消</b>
            <b class="button-n" @click="sureBackTest">确认</b>
          </div>
        </el-dialog>
      </div>
    </div>
    <div class="step2" v-if="navIndex == 1 && !isEmpty">
      <orderDetail @statusChange="statusChange" @refresh="search" hideNav :tableData="tableData" :navIndex="navIndex"></orderDetail>
    </div>
    <div class="pager">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizeArray" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
      </el-pagination>
    </div>
    <!-- <el-dialog custom-class="alertGroup" title="查件申请" :modal-append-to-body="false" :visible.sync="searchObj.show" width="440px" top="10vh">
      <div class="backCont">
        <el-form ref="backCont" :model="searchObj" label-width="80px">
          <el-form-item label="包裹号">
            <el-input v-model="backObj.packageId" class="input-n" type="text" placeholder="请输入内容">
            </el-input>
          </el-form-item>
          <el-form-item label="查件原因">
            <el-select v-model="searchObj.reason" class="input-n" placeholder="请选择">
              <el-option style="padding: 0 10px;" label="物流停滞48小时" value="31"></el-option>
              <el-option style="padding: 0 10px;" label="包裹可能丢失" value="32"></el-option>
              <el-option style="padding: 0 10px;" label="没有物流信息" value="33"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="截图">
            <imgUpload :imgList="searchObj.imgList" max="1"></imgUpload>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="searchObj.comment" class="input-n" type="textarea" :rows="2" placeholder="请输入内容">
            </el-input>
          </el-form-item>
        </el-form>
        <h3>* 请务必在物流信息停滞48小时后联系我们</h3>
      </div>
      <div class="buttons">
        <b class="button-w" @click="searchObj.show = false">取消</b>
        <b class="button-n" @click="sureSearchTest">确认</b>
      </div>
    </el-dialog> -->
    <el-dialog custom-class="alertGroup" title="查件申请" :modal-append-to-body="false" :visible.sync="searchObj.show" width="440px" top="10vh">
      <div class="backCont">
        <h4>请到订单管理里查看具体包裹后进行查件申请</h4>
      </div>
      <div class="buttons">
        <b class="button-n" @click="toApplay">去申请</b>
      </div>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
import NavTitle from '@/components/base/navTitle/index'
import NoCont from '@/components/base/noCont/index'
import ImgUpload from '@/components/base/imgUpload/index'
import { pageCommon } from '@/assets/js/mixin'
import { mapGetters } from 'vuex'
import OrderDetail from './orderDetail/index'
export default {
  name: 'orderLogisticList',
  mixins: [pageCommon],
  components: {
    NavTitle,
    NoCont,
    ImgUpload,
    OrderDetail
  },
  data () {
    return {
      navArr: ['物流查询记录', '已补发订单'],
      // apiUrl: '/api/order/search/getCheckApplyListBySeller',
      tableData: [],
      noImg: require('@/assets/images/noContainer.svg'),
      goodsInfoObj: {
        show: false,
        item: ''
      },
      backObj: {
        reason: '遗失退款',
        imgList: [],
        comment: ''
      },
      searchObj: {
        show: false,
        packageId: '',
        reason: '',
        imgList: [],
        comment: '',
        isCanBack: false
      },
      navIndex: 0
    }
  },
  computed: {
    apiUrl () {
      if (this.navIndex === 0) {
        return '/api/order/search/getCheckApplyListBySeller'
      } else {
        return '/api/order/search/getPackageListForSeller'
      }
    },
    params () {
      if (this.navIndex === 0) {
        return {
          sellerAccountId: this.userInfo.sellerAccountId,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
      } else {
        return {
          start: '',
          end: '',
          logisticsId: '',
          packageStatus: '',
          flagSendAgain: '1',
          receiveTelephone: '',
          thirdOrderNo: '',
          sellerAccountId: this.userInfo.sellerAccountId,
          orderId: '',
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
      }
    },
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    setList (data) {
      this.tableData = data
    },
    lookImg (url) {
      this.$lookImg.show(url)
    },
    checkNav (index) {
      this.navIndex = index
      this.search()
    },
    applySend (item) { // 补发申请请求
      this.$confirm('确认要提交补发申请?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$ajax.post('/api/order/operate/applySendAgain', {
          packageId: item.oldPackageId
        }).then((res) => {
          if (res.data.code === '200') {
            this.$message({
              message: '申请成功, 请耐心等待',
              type: 'success'
            })
            this.$router.push({ name: 'orderManger', query: { sendAgain: 1 } })
          }
        })
      })
    },
    applayBackMoney (item) { // 点击申请退款按钮
      this.goodsInfoObj.item = item
      this.goodsInfoObj.show = true
    },
    sureBackTest () { // 退款请求
      if (this.backObj.reason === '') {
        this.$message({
          message: '选择退款原因',
          type: 'warning'
        })
      } else {
        this.$ajax.post('/api/order/operate/applyRefund', {
          packageId: this.goodsInfoObj.item.oldPackageId,
          refundReason: this.backObj.reason || '',
          refundPicList: this.backObj.imgList || [],
          refundComment: this.backObj.comment || ''
        }).then((res) => {
          if (res.data.code === '200') {
            this.$message({
              message: '申请成功, 请耐心等待',
              type: 'success'
            })
            this.goodsInfoObj.show = false
            this.search()
          }
        })
      }
    },
    statusChange (statusArr) { // 包裹状态选择改变 arr [ statusObj index ]
      this.search()
    },
    searchApplay () { // 申请查件
      this.searchObj.show = true
    },
    sureSearchTest () {
      if (this.searchObj.packageId === '') {
        this.$message({
          message: '请输入包裹号',
          type: 'warning'
        })
      } else if (this.searchObj.reason === '') {
        this.$message({
          message: '请选择查件原因',
          type: 'warning'
        })
      } else if (this.searchObj.imgList.length === 0) {
        this.$message({
          message: '请上传截图',
          type: 'warning'
        })
      } else if (this.searchObj.comment === '') {
        this.$message({
          message: '请填写查件备注',
          type: 'warning'
        })
      } else {
        this.sureBackPost()
      }
    },
    sureBackPost () { // 确认请求查件请求
      this.$ajax.post('/api/order/operate/addCheckApply', {
        packageId: this.searchObj.packageId,
        checkReasonType: this.backObj.reason,
        checkComment: this.backObj.comment,
        logisticsPic: this.backObj.imgList
      }).then((data) => {
        if (data.data.code === '200') {
          this.$message({
            message: '已提交查件申请',
            type: 'success'
          })
          this.goodsInfoObj.show = false
          this.$emit('refresh')
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    },
    toApplay () {
      this.$router.push({ name: 'orderManger', query: { query: 'all' } })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/index'
.orderLogisticList
  .cont
    flex 1
    margin-top 20px
    .tables
      border 1px solid #E2E2E2
      margin-bottom 12px
      .title
        display flex
        justify-content space-between
        padding 0 20px
        fontSize($fontSize, 48px, $fontColor)
        background #F4F4F5
        .status
          color #FE7605
      .goodsInfo
        display flex
        li
          border-right 1px solid #E2E2E2
          box-sizing border-box
          &:last-child
            border none
        .detail
          display flex
          flex-direction column
          justify-content center
          min-width 380px
          >div
            display flex
            padding 20px
            border-bottom 1px solid #E2E2E2
            &:last-child
              border none
            .goodsImg
              width 80px
              height 80px
              margin-right 15px
              align-self center
            .info
              flex 1
              h6
                fontSize($fontSize, 26px, $fontColor)
                margin-bottom 14px
              p
                display flex
                justify-content space-between
                fontSize($fontSize, 26px, $fontColor)
        .address
          padding 20px
          width 300px
          display flex
          flex-direction column
          justify-content center
          span, strong
            fontSize($fontSize, 26px, $fontColor)
          span
            // white-space nowrap
          strong
            margin-left 10px
          img
            min-width 100px
            height 100px
            max-width 250px
            margin-right 10px
            vertical-align top
        .price
          padding 20px
          width 200px
          display flex
          flex-direction column
          justify-content flex-start
          strong, span, p
            fontSize($fontSize, 26px, $fontColor)
          p
            color $mainColor
        .operate
          padding 20px
          flex 1
          text-align center
          display flex
          flex-direction column
          justify-content center
          div
            line-height 30px
          p
            margin-top 20px
          b
            line-height 30px
.alertGroup
  padding 40px
  .content
    h2
      fontSize($fontSize-l, 1, $fontColor)
    .list
      border-bottom 1px solid #EBEEF5
      max-height 350px
      overflow auto
      margin-top 20px
      li
        margin-bottom 20px
        display flex
        justify-content space-between
        fontSize($fontSize, 20px, $fontColor)
        img
          width 60px
          height 60px
        span
          // flex 1
          text-align left
        p
          width 40px
          display flex
          flex-direction column
          justify-content space-between
    .total
      display flex
      margin 20px 10px
      justify-content space-between
      fontSize($fontSize, 1, $fontColor)
      i
        color $mainColor
  .backCont
    text-align left
    h3
      font-size 14px
      color $mainColor
      text-align center
  .buttons
    text-align center
    margin-top 40px
    b
      padding 0 20px
    h3
      margin-top 20px
      font-size 14px
      color $fontColor-gray
</style>
